<template>
  <el-dialog v-model="dialogVisible" :before-close="handleClose" destroy-on-close>
    <div class="title">模型审核结果</div>
    <el-form ref="menuRef" :model="form" :rules="rules" label-width="auto" label-position="top">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="错别字审核" prop="moxingReviewMisspelling">
            <el-input v-model.trim="form.moxingReviewMisspelling" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="语法语义错误" prop="moxingReviewSyntax">
            <el-input v-model.trim="form.moxingReviewSyntax" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="匹配" prop="moxingReviewMatch">
            <el-input v-model.trim="form.moxingReviewMatch" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="模型结果修正" prop="moxingReview">
            <el-input type="textarea" v-model.trim="form.moxingReview" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-button @click="handleVoice" type="primary" :loading="voiceLoading">
        <template #loading>
          <div class="custom-loading">
            <svg class="circular" viewBox="-10, -10, 50, 50">
              <path
                class="path"
                d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
              />
            </svg>
          </div>
        </template>
        结果转语音</el-button
      >
      <div style="margin: 15px 0" v-if="audioUrl">
        <audio ref="audioPlayer" :src="audioUrl" controls></audio>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, reactive, ref, toRefs } from 'vue'
import { ttsAPI } from '@/api/home.js'
import _ from 'lodash'
const { proxy } = getCurrentInstance()
const form = ref<any>({})
const dialogVisible = ref(false)
const rules = ref({})
const voiceLoading = ref(false)
const audioUrl = ref('')
const handleClose = () => {
  console.log(123123)
  dialogVisible.value = false
  proxy.$refs['menuRef'].resetFields()
  form.value = {}
  audioUrl.value = ''
}
const handleVoice = () => {
  voiceLoading.value = true

  ttsAPI({
    text: form.value.moxingReview,
    outputFile: '../storage/' + Date.now() + '.mp3',
  })
    .then((res) => {
      voiceLoading.value = false
      const audioU = URL.createObjectURL(res)
      audioUrl.value = audioU
      // text.value = res
      console.log(res, 'resresresr')
    })
    .catch((err) => {
      voiceLoading.value = false
    })
}
const open = (data) => {
  form.value = _.cloneDeep(data)
  dialogVisible.value = true
}
const state = reactive({})
onBeforeMount(() => {})
onMounted(() => {})
defineExpose({ open })
defineOptions({
  name: 'rulebase',
})
</script>
<style lang="scss" scoped>
.custom-loading {
  .circular {
    margin-right: 6px;
    width: 18px;
    height: 18px;
    animation: loading-rotate 2s linear infinite;
    .path {
      animation: loading-dash 1.5s ease-in-out infinite;
      stroke-dasharray: 90, 150;
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke: var(--el-button-text-color);
      stroke-linecap: round;
    }
  }
}
.title {
  font-size: 18px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 20px;
}
</style>
